<template>
  <el-dialog
    title="编辑角色菜单"
    v-bind="$attrs"
    :visible.sync="visible"
    @close="onClose"
    row-key="menuid"
    center
    width="700px"
  >
    <!--    <el-row>-->
    <!--      <el-input-->
    <!--        placeholder="请输入菜单名称"-->
    <!--        clearable-->
    <!--        border-->
    <!--        stripe-->
    <!--        @clear="filteredList = null"-->
    <!--        v-model="searchVal"-->
    <!--        class="input-with-select"-->
    <!--      >-->
    <!--        <el-button-->
    <!--          slot="append"-->
    <!--          icon="el-icon-search"-->
    <!--          @click="filterRoleMenu"-->
    <!--        ></el-button>-->
    <!--      </el-input>-->
    <!--    </el-row>-->
    <el-table
      ref="editRoleMenuTb"
      :data="filteredList || roleMenuList"
      row-key="menuid"
      v-loading="loading"
      :max-height="400"
      style="width: 100%"
      @select="handleSelect"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="menuname" label="菜单名称" width="150">
      </el-table-column>
      <el-table-column prop="menuid" label="菜单ID" width="100">
      </el-table-column>
      <el-table-column prop="url" label="URL" show-overflow-tooltip />
      <el-table-column label="排序" width="130">
        <template slot-scope="{ row }">
          <el-input
            size="small"
            placeholder="请输入排序"
            v-model.number="row.orders"
            @change="onOrderChange($event, row.menuid)"
          >
          </el-input>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import dialog from "@/mixins/component/dialog";
import menu from "@/mixins/business/menu";

export default {
  name: "EditRoleMenu",
  mixins: [dialog, menu],
  data() {
    return {
      roleMenuList: [],
      roleid: null,
      filteredList: null,
      searchVal: "",
      settingCheckStatus: false,
      loading: false
    };
  },
  watch: {
    roleMenuList: {
      immediate: !0,
      handler(n) {
        n.length &&
          this.$nextTick(() => {
            this.settingCheckStatus = true;
            this.initUserMenuCheck(n);
            this.settingCheckStatus = false;
          });
      }
    },
    roleid: {
      immediate: !0,
      handler(n) {
        n && this.getRoleMenu();
      }
    }
  },
  methods: {
    // filterRoleMenu() {
    //   this.filteredList = this.filterMenu(this.roleMenuList, this.searchVal);
    // },
    initUserMenuCheck(roleMenuList) {
      roleMenuList.map(row => {
        if (row.children && row.children.length)
          this.initUserMenuCheck(row.children);
        row.ischeck && this.$refs.editRoleMenuTb.toggleRowSelection(row);
      });
    },
    getRoleMenu() {
      this.loading = true;
      this.axios.get(`/sys/manage/getRoleAndMenu/${this.roleid}`).then(res => {
        const { firstMenu, secondLevelMenu } = res;
        this.roleMenuList.splice(0);
        this.$nextTick(() => {
          this.roleMenuList = this.mergeMenu(firstMenu, secondLevelMenu);
          this.loading = false;
        });
      });
    },
    onOrderChange(order, menuId) {
      this.axios({
        method: "put",
        url: "/sys/manage/updateOrder",
        params: {
          roleId: this.roleid,
          orders: parseInt(order),
          menuId
        }
      }).then(res => {
        this.getRoleMenu();
      });
    },
    handleSelect(selection, row) {
      const isAdd = selection.map(item => item.menuid).includes(row.menuid);
      let params = {};
      if (isAdd) {
        //  add
        params = {
          method: "post",
          url: "/sys/manage/addRoleAndMenu",
          params: {
            roleId: this.roleid,
            menuId: row.menuid
          }
        };
      } else {
        //  delete last menu
        params = {
          method: "delete",
          url: `/sys/manage/deleteRoleAndMenu/${this.roleid}/${row.menuid}`
        };
      }
      this.axios(params);
    }
  }
};
</script>

<style scoped></style>
